

<!--
发帖
1.@click="onsubmitPost('ruleForm')" 发布帖子
2. @click="resetForm" 重置内容

ruleForm: {
                type: "闲置帖", //分类
                UserId: JSON.parse(localStorage.getItem("user")).id, //用户id
                title: ""//标题
                content: "",//内容
                address: "",//校区
                price: "",//价格
                file: "",//图片
                fileList: [], //储存图片
            },
-->

<template>
  <div class="TutorialsBody">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm succform">
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="闲置贴"></el-radio>
          <el-radio label="校园贴"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>

      <el-form-item label="内容" prop="title">
        <el-input type="textarea" v-model="ruleForm.content"></el-input>
      </el-form-item>

      <el-form-item label="校区" prop="address">
        <el-radio-group v-model="ruleForm.address">
          <el-radio label="官塘校区"></el-radio>
          <el-radio label="社湾校区"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="价格" prop="price" v-if="ruleForm.type != '校园贴'">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>

      <el-form-item label="图片" :required="ruleForm.type != '校园贴'">
        <el-upload class="releaseImg" accept="jpg,png" action="" list-type="picture-card" :auto-upload="false"
          :limit="9" ref="uploadPhoto" multiple :on-change="handlechange">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload_tip">
            jpg/png
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onsubmitPost('ruleForm')">立即发布</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  <input type="text" v-model="resetForm.type">-->
</template>
<style scoped>
.TutorialsBody {
  width: 100vw;
  /* skechy 但能用 无所谓了 */
  height: 92.6vh;

  background:url(../assets/背景p.webp) no-repeat center;
  background-size: 100%;
}

.succform {
  margin: 0 auto;
  max-width: 700px;
  min-width: 100px;
}
</style>

<script>
import { PublicIdlePost, PublicCampusPost } from '@/api/good'

export default {
  data() {
    return {
      ruleForm: {
        type: "闲置帖", //分类
        UserId: JSON.parse(localStorage.getItem("user")).id, //用户id
        title: "", //标题
        content: "",//内容
        address: "",//校区
        price: "",//价格
        file: "",//图片
        fileList: [], //储存图片
      },
      //表单验证
      rules: {
        type:
          [
            { required: true, message: "请选择帖子类型", trigger: "change" }
          ],
        title:
          [
            { required: true, message: "请输入b标题名称", trigger: "blur" },
            { min: 5, max: 30, message: "长度在5到30个字符之间", trigger: "blur" }
          ],
        content:
          [
            { required: true, message: "请填写内容", trigger: "blur" },
            { min: 10, max: 600, message: "长度在10到600个字符之间", trigger: "blur" }
          ],
        address:
          [
            { required: true, message: "请选择发布校区", trigger: "change" }
          ],
        price:
          [
            { required: true, message: "请输入价格,范围: 小数点前10位,小数点后2位", trigger: "blur" }
          ]
      }

    }
  },
  methods: {
    // 图片约束
    handlechange(file, fileList) {
      const islt2M = file.size / 1024 / 1024 < 2;
      console.log(file);
      if (!islt2M) {
        this.$refs.uploadPhoto.handleRemove(file);
        this.message.console.error("上传图片大小不能超过 2MB!");
      } else {
        this.ruleForm.fileList = fileList;
      }
    },
    // 立即发布
    onsubmitPost(formName) {
      if (this.ruleForm.type != "校园贴") {
        this.rules.price[0].required = true;
      };
      this.$refs[formName].validate((valid) => {
        if (this.ruleForm.fileList.length == 0 && this.ruleForm.type != "校园贴") {
          this.$message({
            showClose: true,
            message: "至少上传一张图片",
            type: "error"
          });
          return false;
        }
        if (!valid) {
          return false;
        }
        if (valid) {
          if (this.ruleForm.address == "官塘校区") {
            this.ruleForm.address = 1;
          } else {
            this.ruleForm.address = 2;
          }
          let formData = new FormData();
          formData.append("Address", this.ruleForm.address);//校区
          if (this.ruleForm.fileList.length != 0) {
            this.ruleForm.fileList.forEach((file) => {
              formData.append("file", file.raw);
            });
          }
          formData.append("userId", this.ruleForm.UserId);
          if (this.ruleForm.type == "闲置贴") {

            formData.append("ProductTitleditys", this.ruleForm.title);
            formData.append("ProductDescriptionditys", this.ruleForm.content);
            formData.append("Price", this.ruleForm.price);
            this.PublicIdlePost(formData);//发布闲置帖子
           
          } else {
            formData.append("Title", this.ruleForm.title);
            formData.append("Content", this.ruleForm.content);
            this.PublicCampusPost(formData);//发布校园帖子
          }
        } else {
          return false;
        }
      });
    },
    //重置表单数据
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$refs.uploadPhoto.clearFiles();
    },
    // 发布校园贴
    PublicCampusPost(formData) {
      
      PublicCampusPost(formData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "校园帖发布成功",
            type: "success"
          });
          this.$router.push("/Share");//发布成功跳转
        }
      })
    },
    // 发布闲置贴
    PublicIdlePost(formData) {
      PublicIdlePost(formData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "闲置帖发布成功",
            type: "success"
          });
          this.$router.push("/");//发布成功跳转
        }
      });
    }

  }
}

</script>